<template>
  <div>

    <div class="shopNav">
      <div class="slideall">
        <div class="long-title"><span class="all-goods">全部分类</span></div>
        <div class="nav-cont">
          <ul>
            <li class="index"><a href="#">首页</a></li>
            <li class="qc"><a href="#">闪购</a></li>
            <li class="qc"><a href="#">限时抢</a></li>
            <li class="qc"><a href="#">团购</a></li>
            <li class="qc last"><a href="#">大包装</a></li>
          </ul>
          <div class="nav-extra">
            <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
            <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
          </div>
        </div>
        <div class="bannerTwo">
          <!--轮播 -->
          <el-carousel :interval="5000" arrow="always" height="440px">
            <el-carousel-item v-for="img in indexImages">
              <el-image :src="img.imgUrl" style="width: 100%;height: 100%;"></el-image>
            </el-carousel-item>
          </el-carousel>
          <div class="clear"></div>
        </div>
        <!--侧边导航 -->
        <div id="nav" class="navfull">
          <div class="area clearfix">
            <div class="category-content" id="guide_2">

              <div class="category">
                <ul class="category-list" id="js_climit_li">
                  <li v-for="(c1) in categories" :key="c1.categoryId"
                      class="appliance js_toggle relative first">
                    <el-popover
                        placement="right-start"
                        width="745"
                        trigger="hover"
                    >
                      <div class="category-info" slot="reference">
                        <h3 class="category-name b-category-name"><i><img
                            :src="c1.categoryIcon"></i><a class="ml-22" title="点心"
                                                                v-text="c1.categoryName"></a>
                        </h3>
                        <em>&gt;</em>
                      </div>
                      <div class="menu-item menu-in top">
                        <div class="area-in">
                          <div class="area-bg">
                            <div class="menu-srot">
                              <div class="sort-side">
                                <dl class="dl-sort" v-for="c2 in c1.categories">
                                  <dt><span :title="c2.categoryName">{{ c2.categoryName }}</span></dt>
                                  <dd v-for="c3 in c2.categories"><a :title="c3.categoryName" href="#" @click="goSearch(c3.categoryId)"><span>{{c3.categoryName}}</span></a></dd>
                                </dl>
                              </div>
                              <div class="brand-side">
                                <dl class="dl-sort">
                                  <dt><span>实力商家</span></dt>
                                  <dd><a title="呵官方旗舰店" target="_blank" href="#"><span class="red">呵官方旗舰店</span></a></dd>
                                  <dd><a title="格瑞旗舰店" target="_blank" href="#"><span>格瑞旗舰店</span></a></dd>
                                  <dd><a title="飞彦大厂直供" target="_blank" href="#"><span class="red">飞彦大厂直供</span></a></dd>
                                  <dd><a title="红e·艾菲妮" target="_blank" href="#"><span>红e·艾菲妮</span></a></dd>
                                  <dd><a title="本真旗舰店" target="_blank" href="#"><span class="red">本真旗舰店</span></a></dd>
                                  <dd><a title="杭派女装批发网" target="_blank" href="#"><span class="red">杭派女装批发网</span></a></dd>
                                </dl>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                    </el-popover>
                  </li>


                </ul>
              </div>
            </div>

          </div>
        </div>
        <!--轮播 -->


        <!--小导航 -->
        <div class="am-g am-g-fixed smallnav">
          <div class="am-u-sm-3">
            <a href="sort.html"><img src="@/assets/images/navsmall.jpg"/>
              <div class="title">商品分类</div>
            </a>
          </div>
          <div class="am-u-sm-3">
            <a href="#"><img src="@/assets/images/huismall.jpg"/>
              <div class="title">大聚惠</div>
            </a>
          </div>
          <div class="am-u-sm-3">
            <a href="#"><img src="@/assets/images/mansmall.jpg"/>
              <div class="title">个人中心</div>
            </a>
          </div>
          <div class="am-u-sm-3">
            <a href="#"><img src="@/assets//images/moneysmall.jpg"/>
              <div class="title">投资理财</div>
            </a>
          </div>
        </div>

        <!--走马灯 -->

        <div class="marqueenTwo">
          <span class="marqueen-title">商城头条</span>
          <div class="demo">

            <ul>
              <li class="title-first"><a target="_blank" href="#">
                <img src="@/assets/images/TJ2.jpg"></img>
                <span>[特惠]</span>商城爆品1分秒
              </a></li>
              <li class="title-first"><a target="_blank" href="#">
                <span>[公告]</span>商城与广州市签署战略合作协议
                <img src="@/assets/images/TJ.jpg"></img>
                <p>XXXXXXXXXXXXXXXXXX</p>
              </a></li>

              <div class="mod-vip">
                <div class="m-baseinfo" v-if="isLogin">
                  <a href="">
                    <img src="@/assets/images/getAvatar.do.jpg">
                  </a>
                  <em>
                    Hi,<span class="s-name">{{ username }}</span>
                    <a href="#">
                      <p>点击更多优惠活动</p>
                    </a>
                  </em>
                </div>
                <div class="member-logout" v-else>
                  <a class="am-btn-warning btn" href="login.html">登录</a>
                  <a class="am-btn-warning btn" href="register.html">注册</a>
                </div>
                <div class="member-login">
                  <a href="#"><strong>0</strong>待收货</a>
                  <a href="#"><strong>0</strong>待发货</a>
                  <a href="#"><strong>0</strong>待付款</a>
                  <a href="#"><strong>0</strong>待评价</a>
                </div>
                <div class="clear"></div>
              </div>

              <li><a target="_blank" href="#"><span>[特惠]</span>洋河年末大促，低至两件五折</a></li>
              <li><a target="_blank" href="#"><span>[公告]</span>华北、华中部分地区配送延迟</a></li>
              <li><a target="_blank" href="#"><span>[特惠]</span>家电狂欢千亿礼券 买1送1！</a></li>

            </ul>
            <div class="advTip"><img src="@/assets/images/advTip.jpg"/></div>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</template>
<script>
import {getCategories, getImgIndex} from '@/api/main.js'

export default {
  name: "IndexNav",
  data() {
    return {
      isLogin: false,
      username: '',
      userImg: '',
      indexImages: [],
      categories: []
    }
  },
  methods: {
    goSearch(categoryId) {
      this.$router.push('/catsearch?categoryId=' + categoryId)
    },

  },
  created() {
    console.log(123213)
    if (this.$store.state.account) {
      this.isLogin = true;
      this.username = this.$store.state.account;
      this.userImg = this.$store.state.avatar;
    }
    getImgIndex().then(data => {
      console.log(data.data);
      const res = data.data;
      if (res.success) {
        //alert('拿到数据')
        this.indexImages = res.data;
      } else {
        this.$message({message: res.msg, type: 'warning', showClose: true})
      }

    }).catch(error => {
      this.$message(error)
    });
    getCategories().then(data => {
      //console.log(data.data);
      const res = data.data;
      if (res.success) {
        this.categories = res.data;
        //console.log(JSON.stringify(this.categories));
      } else {
        this.$message({message: res.msg, type: 'warning', showClose: true})
      }

    }).catch(error => {
      this.$message(error)
    });

  }
}
</script>
<style scoped>
li:hover {
  background-color: #ffffff;
}

li:hover a {
  color: #D2364C;
}

.marqueenTwo {
  margin-top: 0px;
  height: 440px;
}
</style>